<template>
  <div>
    <a-button @click="attributeShow = true" style="margin-left: 10px">属性</a-button>
    <vxe-modal
      resize
      show-zoom
      width="700"
      title="步骤设置"
      v-model="attributeShow"
    >
      <template #default>
        <a-form
          :model="settingState"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-item label="组件名称">
            <a-input
              v-model:value="settingState.name"
              placeholder="请输入名称"
            />
          </a-form-item>
          <a-form-item label="分类">
            <a-select
              v-model:value="settingState.dictId"
              placeholder="请选择分类"
            >
              <a-select-option
                :value="item.id"
                v-for="item in settingState.children"
                :key="item"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="备注" name="note">
            <a-textarea v-model:value="settingState.note" />
          </a-form-item>
          <a-form-item label="变量" name="desc">
            <vxe-table style="min-height: 230px" stripe height="230">
              <vxe-table-column
                type="seq"
                title="序号"
                width="60"
                align="center"
              ></vxe-table-column>
            </vxe-table>
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" @click="affirm">确认</a-button>
          </a-form-item>
        </a-form>
      </template>
    </vxe-modal>
  </div>
</template>

<script>
  import { GetDict } from '@/api/dictionary/api'
  export default {
    props: ['note', 'name', 'dictId'],
    data() {
      return {
        settingState: {
          name: this.name,
          children: [],
          dictId: this.dictId,
          note: this.note,
        },
        attributeShow: false,
        labelCol: {
          span: 4,
        },
        wrapperCol: {
          span: 14,
        },
      }
    },
    created() {
      GetDict({
        id: 'f63b47b5-2c9f-f4a8-e36a-39fb8493f552',
        bChild: true,
      }).then((res) => {
        //设置分类数据请求赋值
        if (res.isSuccess) {
          this.settingState.children = res.content.children
        } else {
          return this.$message.error('数据请求失败！')
        }
      })
      console.log('this.settingState=-=-',this.settingState)
    },
    methods: {
      affirm() {
        //console.log(111111111.,this.settingState)
        this.$emit('update:note', this.settingState.note)
        this.$emit('update:name', this.settingState.name)
        this.$emit('update:dictId', this.settingState.dictId)
        this.attributeShow = false
      }
    },
  }
</script>
